<template>
	<div>
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="">
				<el-input placeholder="输入关键字进行过滤" v-model="filterText">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addDepartment" circle><i class="el-icon-plus" /></el-button>
			</el-form-item>
		</el-form>
		<el-tree class="filter-tree"   :data="departmentList" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
		 show-checkbox ref="tree" @check-change="nodeChange" :highlight-current="defaultProps.highlightCurrent" :check-strictly="defaultProps.checkStrictly" >
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span>
				{{ data.departmentName }}</span>
				<span>
					<el-button type="text" size="mini" @click="() => edit(data)">
						编辑
					</el-button>
					<el-button type="text" size="mini" @click="() => remove(data)">
						删除
					</el-button>
				</span>
			</span>
		</el-tree>
		<el-dialog width="30%" title="部门信息" :visible.sync="departmentFormVisible" center>
			<departmentEdit :departmentInfo="departmentInfo" />
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-close" @click="departmentFormVisible = false">取 消</el-button>
				<el-button icon="el-icon-check" type="primary" @click="save">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<style>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
</style>

<script>
	import request from '@/utils/request'
	import departmentEdit from '@/views/system/department/department-edit.vue'
	export default {
		components: {
			departmentEdit
		},
		data() {
			return {
				//
				filterText: '',
				defaultProps: {
					children: 'children',
					label: 'label',
					highlightCurrent: true,
					checkStrictly: true
				},
				//部门列表
				departmentList: [],
				//部门查询条件
				departmentSearch: {},
				//部门编辑框是否显示
				departmentFormVisible: false,
				//部门编辑信息
				departmentInfo: {}
			};
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		//页面初始化加载
		created() {
			this.getList();
		},
		methods: {
			filterNode(value, data) {
				if (!value) return true;
				return data.departmentName.indexOf(value) !== -1;
			},
			//查询列表
			getList() {
				request({
					url: '/system/department/queryTree',
					method: 'post',
					data: this.departmentSearch
				}).then(response => {
					this.departmentList = response.data

				})
			},
			//添加部门
			addDepartment() {
				this.departmentInfo = {}
				this.departmentFormVisible = true
			},
			//保存部门数据
			save() {
				var url = "/system/department/insert"
				if (this.departmentInfo.departmentId) {
					url = "/system/department/update"
				}
				request({
					url: url,
					method: 'post',
					params: this.departmentInfo
				}).then(response => {
					this.departmentFormVisible = false
					this.getList()
				})
			},
			edit(data) {
				this.departmentInfo = data;
				this.departmentFormVisible = true;
			},
			remove(data) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(data)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(data) {
				debugger
				var url = '/system/department/delete';
				request({
					url: url,
					method: 'post',
					data: data
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.userAddFormVisible = false;
				})
			},
			nodeChange() {
				this.$emit("change",this.$refs["tree"].getCheckedNodes(false))
			}
		}
	};
</script>
